<template>
  <div>
    <div class="bj">

      <div class="page">
        <el-row>
          <el-col :span="12" :offset="6">
            <div class="qwe">
              <h2>入住名单</h2>
              <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
                <el-form-item label="所属地区" required>
                  <el-select v-model="form.shiqu" placeholder="请选择">
                    <el-option label="台州市" value="shanghai" placeholder="请选择">
                      <el-option label="杭州市" value="beijing" placeholder="请选择"></el-option>
                    </el-option>
                    <el-option label="杭州市" value="beijing" placeholder="请选择"></el-option>
                  </el-select>
                  <el-select v-model="form.diqu" placeholder="请选择">
                    <el-option label="台州湾" value="shanghai"></el-option>
                    <el-option label="黄岩" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="身份证号码" required prop="sfz">
                  <el-input type="sfz" v-model="form.sfz" placeholder="请输入身份证号码" maxlength="18"></el-input>
                </el-form-item>
                <el-form-item label="姓名" required prop="x">
                  <el-input type="x" v-model="form.x" placeholder="输入联系人姓名" maxlength="3"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" required prop="s">
                  <el-input type="s" v-model="form.s" placeholder="输入11位手机号" maxlength="11" number="type"></el-input>
                </el-form-item>
                <el-form-item label="邮箱号" required prop="y">
                  <el-input type="y" v-model="form.y" placeholder="请填写电子邮箱"></el-input>
                </el-form-item>
                <el-form-item label="性别" required prop="xinbie">
                  <el-select v-model="form.xinbie" placeholder="性别">
                    <el-option label="男" value="shanghai"></el-option>
                    <el-option label="女" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="民族" required prop="mingzu">
                  <el-select v-model="form.mingzu" placeholder="名族">
                    <el-option label="汉" value="shanghai"></el-option>
                    <el-option label="少数名族" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="政治面貌" required prop="zhengzhi">
                  <el-select v-model="form.zhengzhi" placeholder="政治面貌">
                    <el-option label="少先队员" value="shanghai"></el-option>
                    <el-option label="群众" value="beijing"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="出生日期">
                  <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                    style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="设置密码" required prop="password1">
                  <el-input type="sz" v-model="form.password1" placeholder="密码长度至少大于等于六位" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" required prop="password2">
                  <el-input type="qr" v-model="form.password2" placeholder="再次输入密码" show-password></el-input>
                </el-form-item>





                <el-form-item label="" prop="agree">
                  <el-checkbox-group v-model="form.agree">
                    <el-checkbox label="">
                      <span>我已阅读并同意此协议</span>
                      <a href="https://www.douyin.com/" target="_blank">用户注册协议</a>
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>


                <el-form-item>
                  <el-button type="primary" @click="onSubmit">立即创建</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'RegisterView',
  components: {

  },
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        sfz: '',
        x: '',
        s: '',
        y: '',
        password1: '',
        qr: '',
        shiqu: '',
        diqu: '',
        xinbie: '',
        mingzu: '',
        zhengzhi: '',
        agree: '',
        password2: ''
      },
      rules: {
        shiqu: [
          { required: true, message: '请选择城市', trigger: 'blur' }
        ],
        sfz: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' }
        ],
        x: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          {
            max: 20,
            message: "请不要大于20个字",
            trigger: "blur",
          }
        ],
        s: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }
        ],
        y: [
          { required: true, message: '请输入邮箱号码', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        password1: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 8, max: 12, message: '密码长度在8位以上12位以下', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'));
              } else {
                if (this.form.password2 !== '') {
                  this.$refs.form.validateField('password2');
                }
                callback();
              }
            }, trigger: 'blur'
          }
        ],
        password2: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { min: 8, max: 12, message: '密码长度在8位以上12位以下', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.form.password1) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ],
        agree: [
          { required: true, message: '请点击同意协议', trigger: 'blur' }
        ],

      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 校验通过，准备提交
          console.log(this.form);
        } else {
          // 校验不通过，提示
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}

</script>

<style scoped>
.bj {
  background-image: url(../assets/loginbg.png);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.8;
}

.qwe {
  background: #d5f73e88;
  border-radius: 20px;
  padding: 20px;
}

.h2 {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 20px;
}</style>